<template>
    <Panel   shadow :padding="10">
      <el-table
        :data="banner"
        style="width: 100%">
        <el-table-column
          label="标题"
          prop="title"          >
        </el-table-column>
        <el-table-column
          label="跳转链接"
          prop="link"          >
        </el-table-column>
        <el-table-column
          label="图片链接"
          prop="image_url"          >
        </el-table-column>
        <el-table-column
          label="排序"
          prop="order"          >
        </el-table-column>
        <el-table-column
          label="备注"
          prop="remark"          >
        </el-table-column>
        <el-table-column
          label="是否展示"
          prop="able"          >
          <template slot-scope="scope">
            <p>{{scope.row.able}}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑图片" :visible.sync="editing">
        <el-form ref="form" :model="editbanner">
          <el-form-item label="标题">
            <el-input v-model="editbanner.title"></el-input>
          </el-form-item>
          <el-form-item label="跳转链接">
            <el-input v-model="editbanner.link"></el-input>
          </el-form-item>
          <el-form-item label="图片链接">
            <el-input v-model="editbanner.image_url"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="editbanner.remark"></el-input>
          </el-form-item>
          <el-form-item label="顺序">
            <el-input v-model="editbanner.order"></el-input>
          </el-form-item>

          <el-form-item label="是否展示">
            <el-switch v-model="editbanner.able"></el-switch>
          </el-form-item>
      
          <el-form-item>
            <el-button type="primary" @click="onSubmit">更新</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    
    </Panel>
  </template>
  
  <script>
    import api from '../../api.js'

    export default {
      name: 'banner',
      data () {
        return {
          banner: [],
          editbanner: {},
          editing: false
        }
      },
      mounted () {
        this.getBannerList()
      },
      methods: {
        getBannerList () {
          api['getBanners']().then((res) => {
            this.banner = res.data.data
          }).catch()
        },
        handleEdit (index, row) {
          this.editing = true
          this.editbanner = this.banner[index]
          console.log(index, row.title)
        },
        onSubmit () {
          let params = this.editbanner
          console.log('par', params)
          api['editBanners'](params).then((res) => {
            this.editing = false
            this.getBannerList()
          }).catch()
        }
      }
    }
  </script>
  
  <style scoped lang="less">
  </style>
  